import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import debounce from 'lodash/debounce';
import { Select, Spin, Empty } from 'antd';
import styles from '../index.less';
import { useUpdateEffect } from 'ahooks'
/**
 * 用户选择器
 */
const { Option } = Select;

const UserSelect = (props) => {
  const {
    dispatch,
    fieldNames = {},
    loading,
    placeholder,
    multiple = false,
    onChange,
    params = {}
  } = props;

  const { label = 'teamName', value = 'id', tip = 'tipInfo' } = fieldNames;
  const [total, setTotal] = useState(0)
  const [searchData, changeSearchData] = useState({
    pagination: {
      page: 1,
      limit: 10
    },
    keyword: ''
  })
  const [option, setOption] = useState([])
  const { pagination: { page, limit }, keyword } = searchData
  // 获取用户搜索
  const scrollEnd = (e) => {
    e.persist();
    const { target } = e;
    // 滚动 触底 看接口是否还有剩余的值没传过来
    console.log(target.scrollTop, target.offsetHeight, target.scrollHeight)
    if (parseInt(target.scrollTop + target.offsetHeight + 1) >= target.scrollHeight) {
      changeSearchData({
        ...searchData,
        pagination: {
          ...searchData.pagination,
          page: page + 1
        },
      })
    }
  }
  const fetchGetUser = debounce((reload) => {
    if (reload) {
      dispatch({
        type: 'selectionWindow/fetchListTeam',
        payload: {
          ...params,
          page, limit, keyword,

        },
        callback: (e, total) => {
          setTotal(total)
          setOption(e)
        }
      });
    }
    else {
      dispatch({
        type: 'selectionWindow/fetchListTeam',
        payload: {
          ...params,
          page, limit, keyword,
          status: ''
        },
        callback: (e, total) => {
          setTotal(total)
          setOption([...option, ...e])
        }
      });
    }
  }, 500);
  useEffect(() => {
    fetchGetUser()
  }, [page])
  useUpdateEffect(() => {
    console.log('更新了', keyword)
    // setOption(() => {
    //   return []
    // })
    fetchGetUser(true)
  }, [keyword])
  //  multiple = true 配置
  let multProps = {};
  if (multiple) multProps = { mode: 'multiple', maxTagCount: 2 };
  // 返回结果
  return (
    <Select
      allowClear
      showSearch
      style={{ width: '100%' }}
      onPopupScroll={scrollEnd}
      filterOption={() => { return true }}
      loading={loading}
      notFoundContent={loading ? <Spin size="small" /> : null}
      placeholder={placeholder || '请选择'}
      onSearch={(val) => {
        console.log(val)
        changeSearchData({
          pagination: {
            ...searchData.pagination,
            page: 1
          },
          keyword: val
        })
      }}
      onChange={onChange}
      maxTagTextLength={5}
      {...multProps}
    >
      {option.map((data, j) => {
        if (data) {
          // 兼容数组
          const valueData = !data[value] ? `${j}` : data[value];
          const nameData = data[value] ? data[label] : data;
          const otherData = data[tip] ? data[tip] : '';
          return (
            <Option key={j} value={valueData} className={styles.formSelect}>
              {`${nameData}\n${otherData}`}
            </Option>
          );
        }
      })}
    </Select>
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['selectionWindow/fetchListTeam'],
}))(UserSelect);
